<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Karate Timeline</title>
    <style>
      body, html { font-family: arial, sans-serif; font-size: 11pt; }
      #visualization { box-sizing: border-box; width: 100%; height: 300px; }
      .vis-item.failed { background-color: #F2928C; }
      .page-heading { padding: 0.5em; margin-bottom: 0.5em; background-color: lightcyan; border: 1px solid gray; }
    </style>
    <script src="res/vis.min.js"></script>
    <link href="res/vis.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="page-heading">
      <a href="karate-summary.html">Summary</a>
    </div>     
    <div id="visualization"></div>
    <script th:utext="results.data">
      var groups = [];
      var items = [];
    </script>
    <script>
      var container = document.getElementById('visualization');
      var timeline = new vis.Timeline(container);
      timeline.setOptions({groupOrder: 'content'});
      timeline.setGroups(new vis.DataSet(groups));
      timeline.setItems(new vis.DataSet(items));
    </script>
  </body>
</html>
